<template>
  <roll-in-layout :current="3">
    <mt-button slot="right" @click="back">上一步</mt-button>
    <div class="form">
      <yd-cell-group>
        <yd-cell-item>
          <span slot="left" class="label required">工作单位：</span>
          <xf-input
            slot="right"
            :valid="[{required: true, msg: '请填写工作单位'}]"
            v-model="form.expWorkCompany"
            ref="expWorkCompany"
            placeholder="请填写工作单位"></xf-input>
        </yd-cell-item>
        <yd-cell-item>
          <span slot="left" class="label required">单位地址：</span>
          <xf-input
            slot="right"
            :valid="[{required: true, msg: '请填写单位地址'}]"
            v-model="form.expUnitAddress"
            ref="expUnitAddress"
            placeholder="请填写单位地址"></xf-input>
        </yd-cell-item>
        <yd-cell-item>
          <span slot="left" class="label required">身份证地址：</span>
          <xf-input
            slot="right"
            :valid="[{required: true, msg: '请填写身份证地址'}]"
            v-model="form.expCardNumber"
            ref="expCardNumber"
            placeholder="请填写身份证地址"></xf-input>
        </yd-cell-item>
        <yd-cell-item>
          <span slot="left" class="label">电子邮箱：</span>
          <xf-input
            slot="right"
            :valid="[{reg: 'email', msg: '邮箱格式不正确'}]"
            v-model="form.aae015"
            ref="aae015"
            placeholder="请填写电子邮箱"></xf-input>
        </yd-cell-item>
        <yd-cell-item>
          <span slot="left" class="label required">联系电话：</span>
          <xf-input
            slot="right"
            :valid="[{required: true, msg: '请填写联系电话'}, {reg: $regex.phone, msg: '联系电话格式不正确'}]"
            v-model="form.mobilePhone"
            ref="mobilePhone"
            placeholder="请填写联系电话"></xf-input>
        </yd-cell-item>
        <yd-cell-item>
          <span slot="left" class="label required">所属支部：</span>
          <xf-picker
            slot="right"
            :valid="[{required: true, msg: '请选择所属支部'}]"
            v-model="form.partybranchId"
            ref="partybranchId"
            :list="sszb"
            placeholder="请选择所属支部"></xf-picker>
        </yd-cell-item>
        <yd-cell-item>
          <span slot="left" class="label required">入党介绍人一：</span>
          <xf-input
            slot="right"
            :valid="[{required: true, msg: '请填写入党介绍人一'}]"
            v-model="form.partyintroduce"
            ref="partyintroduce"
            placeholder="请填写入党介绍人一"></xf-input>
        </yd-cell-item>
        <yd-cell-item>
          <span slot="left" class="label required">入党介绍人二：</span>
          <xf-input
            slot="right"
            :valid="[{required: true, msg: '请填写入党介绍人二'}]"
            v-model="form.partyintroducetwo"
            ref="partyintroducetwo"
            placeholder="请填写入党介绍人二"></xf-input>
        </yd-cell-item>
        <yd-cell-item>
          <span slot="left" class="label required">列为入党积极分子时间：</span>
          <xf-date-picker
            slot="right"
            :valid="[{required: true, msg: '请选择列为入党积极分子时间'}]"
            v-model="form.ispartypositivedata"
            ref="ispartypositivedata"
            placeholder="请选择列为入党积极分子时间"></xf-date-picker>
        </yd-cell-item>
        <yd-cell-item>
          <span slot="left" class="label required">列为发展对象日期：</span>
          <xf-date-picker
            slot="right"
            :valid="[{required: true, msg: '请选择列为发展对象日期'}]"
            v-model="form.partydevelopmentdata"
            ref="partydevelopmentdata"
            placeholder="请选择列为发展对象日期"></xf-date-picker>
        </yd-cell-item>
        <yd-cell-item>
          <span slot="left" class="label required">现住址：</span>
          <xf-input
            slot="right"
            :valid="[{required: true, msg: '请填写现住址'}]"
            v-model="form.aab301"
            ref="aab301"
            placeholder="请填写现住址"></xf-input>
        </yd-cell-item>
        <yd-cell-item>
          <span slot="left" class="label">是否人大代表：</span>
          <xf-radio
            :list="[{name: '是', value: '1'}, {name: '否', value: '0'}]"
            slot="right"
            ref="radio1"
            v-model="form.radio1"></xf-radio>
        </yd-cell-item>
        <transition name="slide" mode="out-in">
          <yd-cell-item v-if="form.radio1 === '1'">
            <span slot="left" class="label required">人大代表类型：</span>
            <xf-picker
              slot="right"
              :valid="[{required: true, msg: '请选择人大代表类型'}]"
              v-model="form.peoplebehalf"
              ref="peoplebehalf"
              :list="people"
              placeholder="请选择人大代表类型"></xf-picker>
          </yd-cell-item>
        </transition>
        <yd-cell-item>
          <span slot="left" class="label">是否政协委员：</span>
          <xf-radio
            :list="[{name: '是', value: '1'}, {name: '否', value: '0'}]"
            slot="right"
            ref="radio2"
            v-model="form.radio2"></xf-radio>
        </yd-cell-item>
        <transition name="slide" mode="out-in">
          <yd-cell-item v-if="form.radio2 === '1'">
            <span slot="left" class="label required">政协委员类型：</span>
            <xf-picker
              slot="right"
              :valid="[{required: true, msg: '请选择政协委员类型'}]"
              v-model="form.member"
              ref="member"
              :list="people"
              placeholder="请选择政协委员类型"></xf-picker>
          </yd-cell-item>
        </transition>
        <yd-cell-item>
          <span slot="left" class="label">是否担任商会、协会职务：</span>
          <xf-radio
            :list="[{name: '是', value: '1'}, {name: '否', value: '0'}]"
            slot="right"
            ref="radio3"
            v-model="form.radio3"></xf-radio>
        </yd-cell-item>
        <transition name="slide" mode="out-in">
          <yd-cell-item v-if="form.radio3 === '1'">
            <span slot="left" class="label required">担任何种职务：</span>
            <xf-input
              slot="right"
              :valid="[{required: true, msg: '请填写担任何种职务'}]"
              v-model.trim="form.position"
              ref="position"
              placeholder="请填写担任何种职务"></xf-input>
          </yd-cell-item>
        </transition>
      </yd-cell-group>
      <div class="next">
        <mt-button size="large" type="primary" @click="onSubmit">下一步</mt-button>
      </div>
    </div>
  </roll-in-layout>
</template>
<script>
  import RollInLayout from './layout.vue'
  import XfInput from '../../../components/xf-input/xf-input.vue'
  import XfDatePicker from '../../../components/xf-date-picker/xf-date-picker.vue'
  import XfPicker from '../../../components/xf-picker/xf-picker.vue'
  import XfRadio from '../../../components/xf-radio/xf-radio.vue'
  import {STORAGE_TYPE} from '../../../common/js/config'
  import {echo, parse, validate} from '../../../common/js/util'
  import {dics, getDics} from '../../../common/js/dictionaries'
  import {mapGetters} from 'vuex'

  export default {
    components: {
      XfRadio,
      XfPicker,
      XfDatePicker,
      XfInput,
      RollInLayout},
    computed: {
      ...mapGetters([
        'userInfo'
      ])
    },
    data() {
      return {
        form: {
          aae015: '', // 电子邮箱
          mobilePhone: '', // 电话
          partybranchId: '', // 所属支部
          partyintroduce: '', // 入党介绍人1
          partyintroducetwo: '', // 入党介绍人2
          ispartypositivedata: '', // 成为入党积极分子时间
          partydevelopmentdata: '', // 发展对象日期
          aab301: '', // 现住址
          peoplebehalf: '', // 人大类型
          member: '', // 政协委员类型
          position: '', // 担任职务
          expWorkCompany: '', // 工作单位
          expUnitAddress: '', // 单位地址
          expCardNumber: '', // 身份证地址
          radio1: '',
          radio2: '',
          radio3: ''
        },
        sszb: [],
        people: [],
        canLeave: false
      }
    },
    methods: {
      onSubmit() {
        validate.bind(this)(this.form).then(() => {
          const form = Object.assign({}, this.form)
          if (form.radio1 === '0') form.peoplebehalf = ''
          if (form.radio2 === '0') form.member = ''
          if (form.radio3 === '0') form.position = ''
          const total = Object.assign(this.temp, this.form)
          sessionStorage.setItem(STORAGE_TYPE.rollIn, JSON.stringify(total))
          this.$post('/admin/person/sapi/party/organization/save', total, loading => { this.$message.loading(loading) }).then(res => {
            // sessionStorage.removeItem(STORAGE_TYPE.rollIn)
            this.canLeave = true
            this.$router.replace({
              name: 'rollIn4',
              query: {
                id: res.data.personId
              }
            })
          })
        })
      },
      back() {
        this.canLeave = true
        this.$router.replace({name: 'rollIn2'})
      },
      getsszb() { // 所属支部
        this.$post('/admin/person/sapi/party/get/branch').then(res => {
          this.sszb = res.data.map(item => {
            return {
              value: item.id,
              name: item.deptname
            }
          })
        })
      },
      getDics() {
        getDics(dics.people).then(res => {
          this.people = res[0]
        })
      }
    },
    created() {
      this.temp = parse(sessionStorage.getItem(STORAGE_TYPE.rollIn))
      this.form.mobilePhone = this.userInfo.aae005 || ''
      if (!this.temp) {
        this.canLeave = true
        this.$router.replace({name: 'rollIn1'})
        return
      }
      echo(this.form, this.temp)
      this.getsszb()
      this.getDics()
    },
    beforeRouteLeave(to, fro, next) {
      if (this.canLeave) {
        next(true)
      } else {
        this.$message.confirm('您的业务办理尚未完成，确定离开？').then(() => {
          next(true)
        }).catch(() => {
          next(false)
        })
      }
    }
  }
</script>
<style scoped lang="scss">
  @import "../../../common/style/variable";
</style>
